<template>
  <div>
    <el-row :gutter="10" style="margin-left: 3px; margin-top: 5px; margin-right: 5px">
      <!--    工程信息高级搜索-->
      <el-col :span="24">
        <el-card v-show="showAdvancedSearch">
          <el-form size="small" :inline="true" label-width="68px">
            <el-form-item label="数字化单位" prop="shuzihuadanwei">
              <el-input v-model="engQueryParams.shuzihuadanwei" placeholder="请输入数字化单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="移交单位" prop="yijiaodanwei">
              <el-input v-model="engQueryParams.yijiaodanwei" placeholder="请输入移交单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="工程地点" prop="allname">
              <el-input v-model="engQueryParams.allname" placeholder="请输入工程地点" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="建设单位" prop="buildingorg">
              <el-input v-model="engQueryParams.buildingorg" placeholder="请输入建设单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="立项批准单位" prop="checkorg">
              <el-input v-model="engQueryParams.checkorg" placeholder="请输入立项批准单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="设计单位" prop="designorg">
              <el-input v-model="engQueryParams.designorg" placeholder="请输入设计单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="施工单位" prop="operationorg">
              <el-input v-model="engQueryParams.operationorg" placeholder="请输入施工单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="勘察单位" prop="explorationorg">
              <el-input v-model="engQueryParams.explorationorg" placeholder="请输入勘察单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="监理单位" prop="supervisionorg">
              <el-input v-model="engQueryParams.supervisionorg" placeholder="请输入监理单位" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="立项批准文号" prop="checkIssueno">
              <el-input v-model="engQueryParams.checkIssueno" placeholder="请输入立项批准文号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="规划许可证号" prop="planlicenseno">
              <el-input v-model="engQueryParams.planlicenseno" placeholder="请输入规划许可证号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="用地规划许可证号" prop="landplanlicenseno">
              <el-input v-model="engQueryParams.landplanlicenseno" placeholder="请输入用地规划许可证号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="施工许可证号" prop="operationlicenseno">
              <el-input v-model="engQueryParams.operationlicenseno" placeholder="请输入施工许可证号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="开工时间" prop="startdate">
              <el-date-picker clearable v-model="engQueryParams.startdate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择开工时间"/>
            </el-form-item>
            <el-form-item label="竣工时间" prop="enddate">
              <el-date-picker clearable v-model="engQueryParams.enddate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择竣工时间"/>
            </el-form-item>
            <el-form-item label="项目经理" prop="projmanager">
              <el-input v-model="engQueryParams.projmanager" placeholder="请输入项目经理" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="分部(项)工程" prop="partproj">
              <el-input v-model="engQueryParams.partproj" placeholder="请输入分部(项)工程" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="合同号" prop="cnum">
              <el-input v-model="engQueryParams.cnum" placeholder="请输入合同号" clearable
                        @keyup.enter.native="searchEng"/>
            </el-form-item>
            <el-form-item label="申请时间" prop="applydate">
              <el-date-picker clearable v-model="engQueryParams.applydate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择申请时间"/>
            </el-form-item>
            <el-form-item label="批准时间" prop="passdate">
              <el-date-picker clearable v-model="engQueryParams.passdate" type="date" value-format="yyyy-MM-dd"
                              placeholder="请选择批准时间"/>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!--    工程信息-->
      <el-col :span="8">
        <el-card style="height: 780px" v-loading="engLoading">
          <div slot="header" class="search-header">
            <div class="show_title">工程：</div>
            <el-input
              v-model="engQueryParams.engname"
              placeholder="搜索工程"
              clearable
              @keyup.enter.native="searchEng"
              class="my_input"
            />
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEng">搜索</el-button>
              <el-button type="success" icon="el-icon-sort" size="mini" @click="toggleSearchMode">高级</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetEng"></el-button>
            </div>
          </div>
          <div class="engs-container" ref="engsContainer">
            <div
              class="eng-row"
              v-for="eng in engList"
              :key="eng.id"
              @click="selectEng(eng)"
              :class="{ selected: eng === selectedEng }"
            >
              <i class="folder-icon eng-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ eng.engname }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeEng"
              @current-change="handleCurrentChangeEng"
              :current-page.sync="engQueryParams.pageNum"
              :page-size.sync="engQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="engTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!--    案卷信息-->
      <el-col :span="12">
        <el-card style="height: 780px" v-loading="volumeLoading">
          <div slot="header" class="search-header">
            <div class="show_title">案卷目录：</div>
            <el-input
              v-model="volumeQueryParams.vname"
              placeholder="搜索案卷"
              clearable
              @keyup.enter.native="searchVolume"
              class="my_input"
            />
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchVolume">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetVolume">重置</el-button>
            </div>
          </div>
          <div class="engs-container" ref="volumeContainer">
            <div
              class="eng-row"
              v-for="volume in volumeList"
              :key="volume.id"
              @click="selectVolume(volume)"
              :class="{ selected: volume === selectedVolume }"
            >
              <i class="folder-icon volume-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ volume.vname }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeVolume"
              @current-change="handleCurrentChangeVolume"
              :current-page.sync="volumeQueryParams.pageNum"
              :page-size.sync="volumeQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="volumeTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <!--    文件信息-->
      <el-col :span="4">
        <el-card style="height: 780px" v-loading="fileLoading">
          <div slot="header" class="search-header">
            <div class="show_title button-group" style="margin-bottom: 5px">文件列表：</div>
            <div class="button-group" style="margin-left: auto">
              <el-button type="primary" size="mini" @click="downloadFiles" v-if="downloadFlag">下载</el-button>
              <el-button type="primary" size="mini" @click="downloadChange" v-if="fileList.length > 0">
                {{ downloadFlag ? '取消' : '批量下载' }}
              </el-button>
            </div>
          </div>
          <div class="engs-container" ref="fileContainer">
            <div
              class="eng-row"
              v-for="file in fileList"
              :key="file.id"
              @click="selectFile(file)"
              @dblclick="openFile(file)"
              :class="{ selected: file === selectedFile }"
            >
              <input type="checkbox" v-model="file.selected" @click.stop="selectFiles(file)" v-if="downloadFlag"/>
              <i class="folder-icon file-folder-icon"></i>
              <div slot="reference" class="name-wrapper">
                <span class="folder-name" style="display: inline-block; width: 100%; word-wrap: break-word; white-space: normal;">{{ file.filename }}</span>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <!-- 分页信息 -->
            <el-pagination
              @size-change="handleSizeChangeFile"
              @current-change="handleCurrentChangeFile"
              :current-page.sync="fileQueryParams.pageNum"
              :page-size.sync="fileQueryParams.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="fileTotal"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card>
        <el-row v-if="currentInfo === 'eng'">
<!--          <el-col :span="24">-->
<!--            <eng-info :eng-info="selectedEng" @updateEngInfo="getEngList"/>-->
<!--          </el-col>-->
        </el-row>

        <el-row v-else-if="currentInfo === 'volume'">
          <el-col :span="24">
            <volume-info :volume-info="selectedVolume" @updateVolumeInfo="getVolumeList"/>
          </el-col>
        </el-row>

        <el-row v-else-if="currentInfo === 'file'">
          <el-col :span="24">
            <file-info :file-info="selectedFile" @updateFileInfo="getFileList"/>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <el-dialog :visible.sync="videoDialogVisible" center v-loading="loadingMp4" title="文件详情" :before-close="handleVideoDialogClose">
      <video :src="videoUrl"
             autoplay="autoplay"
             ref="vueRef"
             controls width="100%">
        Your browser does not support the video tag.
      </video>
    </el-dialog>


    <!-- 文件显示弹窗 -->
    <el-dialog :visible.sync="pdfDialogVisible" title="文件详情" :width="dialogWidth" center v-dialog-drag v-dialog-drag-width v-dialog-drag-height :close-on-click-modal = "false">
      <embed :src="pdfUrl" type="application/pdf" width="100%" style="height: 80vh" >
    </el-dialog>
    <el-image-viewer v-if="imgDialogVisible" :zIndex="Number(99999)" :url-list="canvasList"
                     :on-close="closeImgViewer"/>
  </div>
</template>

<script>
  // import {listEngInfo} from "@/api/system/enginfo";
  // import {listVolumeinfo} from "@/api/system/volumeinfo";
  // import {downloadMore, getPdf, getType, listFileInfo} from "@/api/system/fileinfo";
  // import EngInfo from "./engInfo";
  // import VolumeInfo from "@/views/system/search/volumeInfo";
  // import FileInfo from "@/views/system/search/fileInfo";
  // import {getFileType, getLocalFile} from "../../../api/system/fileinfopre";

  export default {
    components: {
      // EngInfo,
      // VolumeInfo,
      // FileInfo,
      // 'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data() {
      return {
        canvasList: [],
        videoDialogVisible: false, // 控制弹窗的显示与隐藏
        loadingMp4: false,
        videoUrl: "", // 存储视频文件的URL地址
        showAdvancedSearch: false, // 初始时为简单搜索模式
        engList: [], //工程列表
        volumeList: [], //案卷列表
        fileList: [], //文件列表

        engTotal: 0, //工程总数
        volumeTotal: 0, //案卷总数
        fileTotal: 0, //文件总数

        selectedEng: null,
        selectedVolume: null,
        selectedFile: null,
        currentInfo: "eng",

        engQueryParams: {
          pageNum: 1,
          pageSize: 20,
          engname: null,
        },
        volumeQueryParams: {
          pageNum: 1,
          pageSize: 20,
          regprojid: null,
          vname: null,
        },
        fileQueryParams: {
          pageNum: 1,
          pageSize: 20,
          volumeid: null,
          filename: null,
        },

        engLoading: false,
        volumeLoading: false,
        fileLoading: false,

        blobImage: "", //图片url
        pdfUrl: "", // 存储PDF文件的URL地址
        pdfDialogVisible: false, // 控制弹窗的显示与隐藏
        imgDialogVisible: false, // 控制弹窗的显示与隐藏
        dialogWidth: "70%", // 弹窗的宽度
        dialogHeight: "80vh",
        selectedFiles: [], // 存储被选中的文件的数组
        downloadFlag: false, //下载显示勾选框
      };
    },
    created() {
      this.getEngList();
    },
    methods: {
      closeImgViewer()    {
        this.imgDialogVisible = false
      },
      // //获取工程信息
      // getEngList() {
      //   this.engLoading = true;
      //   listEngInfo(this.engQueryParams)
      //     .then((response) => {
      //       setTimeout(() => {
      //         this.engList = response.rows;
      //         this.engTotal = response.total;
      //         this.engLoading = false;
      //       }, 300);
      //     })
      //     .catch((error) => {
      //       this.$message.error("获取工程信息失败:" + error);
      //       this.engLoading = false;
      //     });
      // },
      // searchEng() {
      //   this.engQueryParams.pageNum = 1;
      //   this.getEngList();
      // },
      // toggleSearchMode() {
      //   this.showAdvancedSearch = !this.showAdvancedSearch;
      // },
      // resetEng() {
      //   this.engQueryParams = {
      //     pageNum: 1,
      //     pageSize: 20,
      //   };
      //   this.getEngList();
      // },
      // selectEng(eng) {
      //   this.selectedEng = eng;
      //   this.currentInfo = "eng";
      //   this.volumeQueryParams.regprojid = eng.id;
      //   // this.volumeQueryParams.regprojid = '20130101/6-41092158-2671-492c-8d0f-96082f95979d'
      //   this.getVolumeList();
      // },
      // downloadFile() {
      //   // 实现下载文件的逻辑
      //   const link = document.createElement("a");
      //   link.href = this.blobImage;
      //   link.download = "file.jpg";
      //   link.click();
      // },
      // printFile() {
      //   // 实现打印文件的逻辑
      //   const printWindow = window.open("", "_blank");
      //   printWindow.document.write(
      //     `<img src="${this.blobImage}" style="max-width: 100%; height: auto;">`
      //   );
      //   printWindow.document.close();
      //   printWindow.print();
      // },
      // handleSizeChangeEng(pageSize) {
      //   this.engQueryParams.pageSize = pageSize;
      //   this.getEngList();
      // },
      // handleCurrentChangeEng(currentPage) {
      //   this.engQueryParams.pageNum = currentPage;
      //   this.getEngList();
      // },
      // //获取案卷信息
      // getVolumeList() {
      //   this.volumeLoading = true;
      //   this.fileList = [];
      //   listVolumeinfo(this.volumeQueryParams)
      //     .then((response) => {
      //       setTimeout(() => {
      //         this.volumeList = response.rows;
      //         this.volumeTotal = response.total;
      //         this.volumeLoading = false;
      //       }, 300);
      //     })
      //     .catch((error) => {
      //       this.$message.error("获取案卷信息失败:" + error);
      //       this.volumeLoading = false;
      //     });
      // },
      // searchVolume() {
      //   this.volumeQueryParams.pageNum = 1;
      //   this.getVolumeList();
      // },
      // resetVolume() {
      //   // this.volumeQueryParams.regprojid = null
      //   this.volumeQueryParams.vname = null;
      //   if (this.volumeQueryParams.regprojid != null) {
      //     this.getVolumeList();
      //   }
      // },
      // selectVolume(volume) {
      //   this.selectedVolume = volume;
      //   this.currentInfo = "volume";
      //   this.fileQueryParams.volumeid = volume.id;
      //   this.getFileList();
      // },
      // handleSizeChangeVolume(pageSize) {
      //   this.volumeQueryParams.pageSize = pageSize;
      //   this.getVolumeList();
      // },
      // handleCurrentChangeVolume(currentPage) {
      //   this.volumeQueryParams.pageNum = currentPage;
      //   this.getVolumeList();
      // },
      // //获取文件信息
      // getFileList() {
      //   this.fileLoading = true;
      //   listFileInfo(this.fileQueryParams).then((response) => {
      //     response.rows.forEach((file) => {
      //       file.selected = false; // 为每个数据对象添加selected属性，初始值为false
      //     });
      //     setTimeout(() => {
      //       this.fileList = response.rows;
      //       this.fileTotal = response.total;
      //       this.fileLoading = false;
      //     }, 300);
      //   }).catch((error) => {
      //     this.$message.error("获取文件信息失败:" + error);
      //     this.fileLoading = false;
      //   });
      // },
      // //选中文件
      // selectFile(file) {
      //   this.selectedFile = file;
      //   this.currentInfo = "file";
      // },
      // //选中多个文件
      // selectFiles(file) {
      //   // 如果文件已经选中，取消选中并从selectedFiles数组中移除
      //   const index = this.selectedFiles.findIndex(selectedFile => selectedFile.id === file.id);
      //   if (file.selected) {
      //     file.selected = false;
      //     if (newdata !== -1) {
      //       this.selectedFiles.splice(newdata, 1); // 使用splice方法移除指定索引的元素
      //     }
      //   } else {
      //     // 如果文件未选中，选中并添加到selectedFiles数组中
      //     file.selected = true;
      //     this.selectedFiles.push(file);
      //   }
      // },
      // //展开/关闭下载
      // downloadChange() {
      //   this.fileList.forEach((file) => {
      //     file.selected = false; // 为每个数据对象添加selected属性，初始值为false
      //   });
      //   this.selectedFiles = [];
      //   this.downloadFlag = !this.downloadFlag;
      // },
      // //下载多个文件
      // downloadFiles() {
      //   if (this.selectedFiles.length === 0) {
      //     this.$message({
      //       message: '请先选择要下载的文件！',
      //       type: 'warning'
      //     });
      //   } else if (this.selectedFiles.length === 1) {
      //     this.selectedFiles.forEach(file => {
      //       this.downloadOneFile(file);
      //     })
      //   } else {
      //     let ids = [];
      //     this.selectedFiles.forEach(file => {
      //       ids.push(file.id)
      //     })
      //     downloadMore(ids).then((response) => {
      //       // 处理接收到的二进制ZIP文件数据
      //       const blob = new Blob([response], {type: "application/zip"});
      //       const url = window.URL.createObjectURL(blob);
      //       // 创建一个下载链接并触发点击以下载ZIP文件
      //       const a = document.createElement('a');
      //       a.href = url;
      //       a.download = 'downloaded.zip';
      //       a.style.display = 'none';
      //       document.body.appendChild(a);
      //       a.click();
      //       window.URL.revokeObjectURL(url);
      //     });
      //   }
      // },
      // // 下载单个文件名打开文件
      // downloadOneFile(file) {
      //   getType(file).then((response) => {
      //     const fileType = response.toLowerCase();
      //     getPdf(file).then( res => {
      //       // 处理接收到的二进制ZIP文件数据
      //       const blob = new Blob([res], {type: "application/pdf"});
      //       const url = window.URL.createObjectURL(blob);
      //       // 创建一个下载链接并触发点击以下载ZIP文件
      //       const a = document.createElement('a');
      //       a.href = url;
      //       a.download = file.filename + "." + fileType;
      //       a.style.display = 'none';
      //       document.body.appendChild(a);
      //       a.click();
      //       window.URL.revokeObjectURL(url);
      //     })
      //   })
      // },
      // openFile(file) {
      //   getType(file).then((response) => {
      //     const fileType = response.toLowerCase(); // 转换为小写以确保比较不区分大小写
      //     if (fileType === 'pdf') {
      //       this.openPDF(file);
      //     } else if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'tif' || fileType === 'gif') {
      //       this.openImg(file);
      //     } else if (fileType === 'tiff') {
      //       this.openTiff(file);
      //     } else if (fileType === 'mp4') {
      //       this.openMp4(file);
      //     }
      //   });
      // },
      // //打开图片
      // openImg(file) {
      //   this.canvasList = [];
      //   this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
      //   getPdf(this.fileForm)
      //     .then((response) => {
      //       const blob = new Blob([response], {type: "image/jpeg"});
      //       this.blobImage = URL.createObjectURL(blob);
      //       this.canvasList.push(URL.createObjectURL(blob))
      //       this.imgDialogVisible = true; // 显示弹窗
      //     })
      //     .catch((error) => {
      //       console.error("获取图片时出错:", error);
      //     });
      // },
      // openTiff(file) {
      //   this.canvasList = [];
      //   this.fileForm = file;
      //   getPdf(this.fileForm).then((response) => {
      //     var tiff = new Tiff({buffer: response})
      //     for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
      //       tiff.setDirectory(i)
      //       var imgs = tiff.toDataURL() // 转化成base64
      //       if (imgs) {
      //         this.canvasList.push(imgs)
      //         this.imgDialogVisible = true;
      //       }
      //     }
      //     console.log(this.canvasList)
      //   }).catch((error) => {
      //     console.error("获取图片时出错:", error);
      //     // 可以添加错误处理逻辑，比如显示一个错误提示框等
      //   });
      // },
      // //打开PDF
      // openPDF(file) {
      //   this.fileForm = file; // 将文件信息保存到fileForm中，以便在getPdf函数中使用
      //   getPdf(this.fileForm)
      //     .then((response) => {
      //       const blob = new Blob([response], {type: "application/pdf"});
      //       this.pdfUrl = URL.createObjectURL(blob);
      //       this.pdfDialogVisible = true; // 显示弹窗
      //     })
      //     .catch((error) => {
      //       console.error("Error occurred while fetching the PDF:", error);
      //       // 可以添加错误处理逻辑，比如显示一个错误提示框等
      //     });
      // },
      // openMp4(file) {
      //   this.videoDialogVisible = true; // 显示弹窗
      //   this.loadingMp4 = true;
      //   getPdf(file).then((response) => {
      //     const blob = new Blob([response], {type: "video/mp4"});
      //     this.videoUrl = URL.createObjectURL(blob);
      //   }).catch((error) => {
      //     console.error("获取文件时出错:", error);
      //   });
      //   this.loadingMp4 = false;
      // },
      // handleSizeChangeFile(pageSize) {
      //   this.fileQueryParams.pageSize = pageSize;
      //   this.getFileList();
      // },
      // handleCurrentChangeFile(currentPage) {
      //   this.fileQueryParams.pageNum = currentPage;
      //   this.getFileList();
      // },
      // handleVideoDialogClose(done){
      //   this.$refs.vueRef.pause();
      //   done(); // 调用 done() 完成弹窗的关闭操作
      // },
    },
  };
</script>

<style>
  /* 公共样式 */
  .search-header {
    display: flex;
    align-items: center;
  }

  .my_input {
    margin-left: auto;
    width: 15%;
    margin-right: 5px;
  }


  .button-group {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .engs-container {
    height: 600px;
    overflow-y: auto;
  }

  .eng-row {
    flex-basis: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .eng-row:hover {
    cursor: pointer;
    background-color: #e5f3ff;
  }

  .pagination-container {
    margin-top: 10px;
  }

  .folder-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-size: cover;
  }

  .folder-name {
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .show_title {
    font-weight: bold;
    font-size: 0.4rem;
    color: rgb(26, 115, 198);
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }


  /* 选中状态的样式 */
  .selected {
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
    background-color: #cce8ff;
  }
</style>

